<!DOCTYPE html>
<html>

<head>
  <title>Datavisual groei van het web en de verdeling</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Data visualizations" />
  <meta name="author" content="Project Fudge" />

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <link rel="stylesheet" type="text/css" href="/css/timeline.css">
  <link rel="stylesheet" type="text/css" href="/css/charts.css">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@next/dist/aos.css" />

</head>

<body>
  <header class="header">

    <!-- NAVIGATION -->
    <nav>
      <ul>
        <li><a href=#about>Over het project</a></li>
        <li><a href=#visual>Visualisaties</a></li>
        <li><a href=#team>Het team</a></li>

      </ul>
    </nav>

    <div class="logo" data-aos="fade-down">
      <img src="images/openintelLogo.svg" alt="">
    </div>


    <div class="centerIntro">
      <div class="Iam" data-aos="fade-down">
        <p>www.Openintel</p>
        <b>
          <div class="innerIam">
            .nl<br />
            .es<br />
            .ru<br />
            .frl<br />
            .com
          </div>
        </b>
      </div>
    </div>

    <!-- INTRO TEKST -->
    <article data-aos="fade-down" class="intro">
      <p>
        Heb jij wel eens een website bezocht die bijvoorbeeld eindigt op .nl, .com, .biz of .de? Deze extensies worden ook wel top-level-domeinnamen genoemd, afgekort ook wel TLD’s. Op de website gaan we hier dieper op in en kijken we naar de
        verhoudingen van .com tegenover de landelijke extensies (.nl, .de, .se etc), bij welke websites extensies de TLD’S worden geregistreerd, hoeveel er wordt uitgegeven aan verschillende TLD’s bij landelijke extensies en hoe de populatie
        verdeling eruit zal zien als alle domeinnamen personen waren.
      </p>
    </article>
  </header>

  <!-- OVER HET PROJECT -->
  <h1 id='about'>Over het project</h1>
  <section class="about">

    <article data-aos="fade-right">
      <header>
        <h2>Wat laten we zien</h2>
      </header>
      <p>Op deze pagina willen we de groei en verdeling van de TDL's laten zien en hun veranderingen over de tijd 2014/2018. We gaan ook in op andere aspecten zoals hoeveel er werd uitgegeven en hoe de verdeling binnen een land zal zijn.
      </p>
    </article>

    <article data-aos="fade-down">
      <header>
        <h2>Hoe werkt het</h2>
      </header>
      <p>De website begint met wat bredere informatie waardoor je inzicht krijgt in de verhoudingen van de TLD’s op een explainitive manier. Hierna ga je door middel van 2 statische visualisaties meer op een exploritive manier door de data.</p>
    </article>

    <article data-aos="fade-left">
      <header>
        <h2>Belangrijke resultaten</h2>
      </header>
      <p>Uit de data komt vooral naar voren dat .com giganties is door de USA. Ook zien we in de data een megasprong bij de TLD .biz in sweden. Het valt ook op dat Nederland grote speler is als landelijke aanbieder met betrekking tot hosting.</p>
    </article>
  </section>


  <!-- VISUALIZATION -->


  <section class='visualization'>
    <h1 class="visualTitel" id='visual'>Verhouding van .com tegenover de landelijke TLD's</h1>
    <aside data-aos="fade-right" class="summary">
      <h2>Wat laat deze visualisatie zien en hoe werkt deze?</h2>
      <p>In deze visualisatie ziet uw door middel van een bubble chart het verschil tussen de .com TLD die internationaal wordt gebruikt en de landelijke TLD’s die nationaal wordt gebruikt. U kunt zien hoe groot de verschillen zijn in de
        aantallen. ln de bubble chart zie je het totale aantal geregistreerde domeinnamen met een .com of landelijke TLD. Door met je muis over de bubbles te gaan zie je de toolbox waarin meer de aantallen en nog extra informatie staat.  </p>
        <button type="button" id="global" name="button">Split internationaal</button>
      <button type="button" id="combine" name="button">Center</button>
      <p>Door gebruik te maken van de knoppen kunt u de bubbles opsplitsen om zo een goede vergelijking te kunnen maken. Split internationaal zorgt ervoor dat .com tegenover de rest vergeleken wordt. Met center komen ze allemaal bij elkaar te staan.</p>
      <p>*De nummers die u ziet zijn afgerond voor uw lees gemak (nummers voor de bereking zijn niet afgerond)</p>
    </aside>

    <article data-aos="fade-left" class="visual-work">
      <div id="bubble"></div>
    </article>
  </section>



  <h1 class="visualTitel">Bij welke website extensies worden worden de (.nl) TLD’s geregistreerd?</h1>
  <section class='visualization pieChartsHeight'>
    <article data-aos="fade-right" class="visual-work">
      <div id="pieCharts">
        <header>

        </header>
        <section>

        </section>
      </div>
      <section id="timerOptions">
        <p></p>
        <div>
          <span data-index="0"></span>
        </div>
        <button type="button" name="button">
          <span class="fa fa-play"></span>
          <span class="fa fa-pause"></span>
        </button>
      </section>
    </article>

    <aside data-aos="fade-left" class="summary">
      <h2>Wat laat deze visualisatie zien en hoe werkt deze?</h2>
      <p>In deze visualisatie zien we de verdeling van een TLD over de verschillende landen. In het midden wordt aangegeven om welke TLD het gaat. De delen eromheen geven aan bij welk TLD nationaal de eerder genoemnde TLD wordt gehost.</p>
      <p>Door met de muis over de verdeling te gaan kunnen de exacte waardes worden bekeken door middel van een toolbox. Deze delen lichten dan op samen met de delen van andere TLD’s zodat er makkelijk kan worden vergeleken. Per land kunnen de
        charts ook afzonderlijk bekeken worden door op de desbetreffende chart te klikken. </p>
        <p>Onderaan kunt u ook gebruik maken van een tijdlijn. De tijdlaan laat de verschillen zien over de laatste 4 jaar per maand. Je kunt deze afspelen of handmatig slapen naar de gewenste datum. </p>
    </aside>
  </section>

  <section class='visualization relativevisual'>
    <div data-aos="fade-up" class="chartinwonersHolder">
      <div class="visualTitelText">
        <h1>Hoeveel euro wordt er uitgegeven aan verschillende TLD’s bij de landelijke extensies. </h1>
        <p>In deze visualisatie zien we de verdeling van TLD's over de verschillende landen. Aan de buitenkant wordt aangegeven om welke TLD het gaat. Zowel in het midden als uit de buitekant zie je om welk land het gaat. Je ziet hoe groot de aandelen zijn van de TLD's en wat gebruikers hier aan hebben uitgegeven bij een bedrijf die eindigd op de TLD van het desbetreffende land.</p>
        <p>Het hoeft echter niet altijd te betekenen dat een hosting bedrijf die eindigt op .nl ook echt een Nederlands bedrijf is. Maar laten we hier even van uitgaan.</p>
        <p>Voor de leesbaarheid kan de diagram nog geroteerd worden door middel van de slider rechts boven in het scherm.</p>
      </div>
      <div class="sliderHolder">
        <p>Roteer de diagram</p>
        <input type="range" id="slider" name=" "min="0" max="180" value="0">
      </div>
      <img class="chartinwoners" id="rotate" src="./images/visual-youp.svg" alt="Verdienst cijfers in bubble chart">
    </div>
  </section>


  <section class='visualization'>
    <div data-aos="fade-up" class="chartinwonersHolder">
      <div class="visualTitelText">


        <h1>Wat als de TLD verdeling hetzelfde was als de verdeling van de populatie?</h1>
        <p>De onderstaande dot chart is een statische diagram. In de visualisatie gaan we ervan uit dat de verdelingen van de TLD’s over een land gelijk staat aan de inwoners verdeling. Hiermee laten
          we zien hoe de landen eruit zouden zien als alle inwoners TLD’s waren. Dit hebben we berekend door het aantal inwoners te delen door de aandelen van de TLD's.</p>
      </div>
      <img class="chartinwoners" src="./images/chart_inwoners.svg" alt="">
    </div>
  </section>

  <!-- ONS TEAM -->
  <h1 id='team'>The team</h1>

  <section class="team">

    <article data-aos="fade-left">
      <img src="images/martijn.png" alt="Martijn" />
      <h3>Martijn</h3>
      <p>Technicus</p>
    </article>

    <article data-aos="fade-up">
      <img src="images/angela.png" alt="Angela" />
      <h3>Angela</h3>
      <p>Visualizer</p>
    </article>

    <article data-aos="fade-up">
      <img src="images/jesse.png" alt="Jesse" />
      <h3>Jesse</h3>
      <p>Technicus</p>
    </article>

    <article data-aos="fade-right">
      <img src="images/youp.png" alt="Youp" />
      <h3>Youp</h3>
      <p>Visualizer</p>
    </article>

  </section>

  <script type="text/javascript" src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
  <script type="text/javascript" src="/js/script.js"></script>
  <!-- <script type="text/javascript" src="/js/bubbles.js"></script> -->
  <script type="text/javascript" src="/js/donut.js"></script>
  <script type="text/javascript" src="/js/sidescript.js"></script>


</body>




</html>
